<template>
	<div class="repair-operation">
		<a-card>
			<a-row>
				<a-col :span="12" class="op-box">
					<a-button type="text" class="btn" @click="toAddBill">
						<img class="op-icon" :src="BaoxiuIcon" />
						<span class="op-txt">我要报修</span>
					</a-button>
				</a-col>
				<a-col :span="12" class="op-box">
					<a-button type="text" class="btn" @click="toWorkStation">
						<img class="op-icon" :src="WorkIcon" />
						<span class="op-txt">工作台</span>
					</a-button>
				</a-col>
			</a-row>
		</a-card>
	</div>
	<AddBill v-if="showAddBill" @closeModal="closeModal"/>
</template>
<script setup>
    import AddBill from '@/views/student/add-bill.vue';
	import BaoxiuIcon from '@/assets/images/repair/baox.png';
	import WorkIcon from '@/assets/images/repair/work.png';
	import { useRouter } from 'vue-router';
	import { ref, onMounted, computed } from 'vue';
	import { useUserStore } from '@/store/modules/user';
	import tool from '@/utils/tool'; 
	const router = useRouter(); 
    const showAddBill = ref(false);
	const is_normal_user = ref(false);
	is_normal_user.value = useUserStore().is_normal_user;

	const toWorkStation = function () {
		const isLg = checkIsLogin();
		if (!isLg) {
			return;
		}
		// console.log("is_normal_user",is_normal_user.value)
		if(! is_normal_user.value){
			router.push({
				path: '/work/workstation',
			});
		}else{
			router.push({
				path: '/shome',
			});
		}
	};
	const toAddBill = function(){
		const isLg = checkIsLogin();
		if (!isLg) {
			return;
		}
		if(is_normal_user.value){
			showAddBill.value = true;
		}else{
			router.push({
				path: '/work/repairadd',
			});
		}
	};
	const checkIsLogin = function () {
		if (!useUserStore().userId) {
			tool.showConfirm({
				content: '您还未登录，请先登录！',
				yText: '去登录',
				ok: () => {
					router.replace('/login');
				},
			});
			return false;
		}
		return true;
	};

	const closeModal = function(){
		showAddBill.value = false;
	}
</script>
<style lang="less" scoped>
	.repair-operation {
		margin-bottom: 16px;

		.op-box {
			text-align: center;
			.btn {
				height: 70px;
			}
			.op-icon {
				display: block;
				width: 24px;
				height: 24px;
				margin: 0 auto;
				margin-bottom: 8px;
			}

			.op-txt {
				color: #1d2129;
				font-size: 14px;
			}
		}
	}
</style>
